<template>
  <view>
    <u-navbar
      title="我的"
      left-icon=" "
      bg-color="transparent"
      :title-style="{
        color: '#fff',
      }"
    />
    <view class="header" @click="handleTo('/pages/my/userInfo')">
      <u-row>
        <u-col span="10">
          <view class="row-left">
            <u-avatar :src="userInfo.avatar" size="60" />
            <text>{{ userInfo.nickname || "-" }}</text>
          </view>
        </u-col>
        <u-col span="2">
          <u-icon name="setting" color="#fff" />
        </u-col>
      </u-row>
    </view>
    <u-cell-group>
      <u-cell isLink @click="handleScan">
        <view slot="title" class="title">
          <u-icon name="scan" color="#2CB9A4" size="22" />
          <text>扫一扫</text>
        </view>
      </u-cell>
      <u-cell isLink @click="handleTo('/pages/protocol/index')">
        <view slot="title" class="title">
          <u-icon name="file-text" color="#FF954E" size="22" />
          <text>隐私协议</text>
        </view>
      </u-cell>
    </u-cell-group>
    <view class="btn" @click="exitShow = true">
      <image
        :src="require('@/static/exit.png')"
        style="width: 30rpx; height: 30rpx"
        mode="scaleToFill"
      />
      <text>退出登录</text>
    </view>
    <u-modal
      :show="exitShow"
      title="提示"
      content="是否退出登录？"
      show-cancel-button
      close-on-click-overlay
      @confirm="handleExit"
      @cancel="exitShow = false"
      @close="exitShow = false"
    />
  </view>
</template>

<script>
import { userLogout } from "@/request/api.js";
export default {
  data() {
    return {
      userInfo: {}, // 用户信息
      exitShow: false, // 退出登录
    };
  },
  onShow() {
    this.init();
  },
  methods: {
    // 初始化用户信息
    init() {
      let info = uni.getStorageSync("USER_INFO");
      if (info) {
        this.userInfo = JSON.parse(info);
      }
    },
    // 跳转详情
    handleTo(url) {
      uni.navigateTo({
        url: url,
      });
    },
    // 扫一扫
    handleScan() {
      uni.scanCode({
        scanType: ["qrCode"],
        success: (res) => {
          let { id, codes } = JSON.parse(res.result);
          uni.reLaunch({
            url: `/pages/my/transfer?id=${id}&codes=${codes}`,
          });
        },
        fail: (e) => {
          console.log(e);
          uni.showToast({
            title: "扫码失败",
            icon: "none",
          });
        },
      });
    },
    // 退出登录
    handleExit() {
      this.exitShow = false;
      userLogout({ token: uni.getStorageSync("TOKEN") }).then((res) => {
        if (res.code == 1) {
          uni.removeStorageSync("USER_INFO");
          uni.removeStorageSync("TOKEN");
          uni.showToast({
            title: "退出成功",
            icon: "success",
            mask: true,
            success: () => {
              setTimeout(() => {
                uni.reLaunch({
                  url: "/pages/login/login",
                });
              }, 2000);
            },
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  height: 200rpx;
  padding-top: 200rpx;
  background-image: linear-gradient(105.82deg, #1a98fc 0%, #93cfff 98.75%);
  .row-left {
    display: flex;
    align-items: center;
    color: #fff;
    padding-left: 40rpx;
    > text {
      margin-left: 20rpx;
    }
  }
  /deep/.u-icon {
    position: absolute;
    right: 30rpx;
    top: 240rpx;
  }
}
.title {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text {
    margin-left: 20rpx;
  }
}
.btn {
  position: fixed;
  bottom: 30rpx;
  left: 30rpx;
  right: 30rpx;
  display: flex;
  background-color: #1a98fc;
  align-items: center;
  height: 80rpx;
  border-radius: 40rpx;
  color: #fff;
  justify-content: center;
  text {
    margin-left: 20rpx;
  }
}
</style>
